<template>
  <page class="me" :bottom="0">
    <van-nav-bar fixed title="搜索" left-arrow @click-left="back()" />
    <div class="search">


      <van-search v-model="state.value" show-action placeholder="请输入搜索关键词" @click="onClickButton">
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
      <div class="listone">
        <div class="sea">热门搜索</div>
        <div class="qwe" v-if="state.searchlist.length == 0">
          <div class="listtui"  v-for="item, index in state.tuijian" :key="index">
            <div class="text" @click="onsearcha(item.text)"> {{ item.text }}</div>
          </div>
          
        </div>
        <item v-else :list="state.searchlist"></item>
      </div>
    </div>

  </page>
</template>
 
<script setup lang="ts">

import { onMounted, reactive, } from "vue";
import { useRouterAction } from "@/utils/router";

import { search } from "@/serve/_";
const { back, push } = useRouterAction()

import { showToast } from 'vant';
import { IndexType } from "@/types/res/home";
import { Key } from "node-rsa";



//定义变量
const state: {
  value: string,//搜索框的关键字
  searchlist: [] | IndexType,//接口请求到的字段
  tuijian: []
} = reactive({
  value: '',
  searchlist: [],
  tuijian: [
    { text: "华为" },
    { text: "小米" },
    { text: "iphone" },
    { text: "荣耀" },
  ]
})

onMounted(() => {
  // console.log("搜索");

})

// 点击搜索或回车执行的方法
let onSearch = async () => {
  state.searchlist = await search({
    keyword: state.value
  });
  console.log("value", state.value);
  console.log("res", state.searchlist);

}

// 点击取消执行的方法
let onClickButton = () => {
  state.searchlist = []
}

let onsearcha = async (v) => {
  state.searchlist = await search({
    keyword: v
  });

  console.log("chuangaaaaaa", v);
}

</script>
 
<style lang="less" scoped>
@import "@page/search.less";
</style>
 